<template>
	<InterceptContainer :need-login="true">
		<view class="user-warpper">
			<view class="header">
				<view class="setting-icon" @click="toEdit('/edit/edit')">
					<img src="@/assets/images/setting.png" alt="">
				</view>
				<view class="user">
					<img class="ava" v-bind:src="userInfo.userInfo.userAvatar" alt=""
						v-if="userInfo.userInfo.userAvatar">
					<img class="ava" v-if="!userInfo.userInfo.userAvatar"
						src="https://wish-1300401836.cos.ap-beijing.myqcloud.com/default_ava.png" alt="">
					<text class="name">{{ userInfo.userInfo.name ?? "" }}</text>
				</view>

				<view class="num-tips">
					<view class="item">
						<view class="num">{{ userInfo.myWishCount }}</view>
						<view class="text">我的心愿</view>
					</view>
					<view class="item">
						<view class="num">{{ userInfo.participateCount }}</view>
						<view class="text">参与的心愿</view>
					</view>
					<view class="item">
						<view class="num">{{ userInfo.participateCount }}</view>
						<view class="text">已助力</view>
					</view>
				</view>

			</view>

			<view class="body">
				<view class="card">
					<view class="card-title">我的服务</view>
					<view class="server">
						<view class="server-item">
							<img class="server-img" src="@/assets/images/now-share.png" alt="">
							<view class="server-text">分享心愿</view>
						</view>
						<view class="server-item">
							<img class="server-img" src="@/assets/images/now-yq.png" alt="">
							<view class="server-text">邀请好友</view>
						</view>
						<view class="server-item">
							<img class="server-img" @click="toBase" src="@/assets/images/now-up.png" alt="">
							<view class="server-text">立即提现</view>
						</view>
					</view>
				</view>

				<view class="card-list">
					<view class="card-item">
						<view class="item-wrapper">
							<img class="item-img" src="@/assets/images/icon_xiaoxi.png" alt="">
							<view class="item-text">&nbsp;我的消息</view>
						</view>
						<view>
							<img class="right" src="@/assets/images/cheveron-right.png" alt="">
						</view>
					</view>

					<view class="card-item" @click="toPath('/myWish/myWish')">
						<view class="item-wrapper">
							<img class="item-img" src="@/assets/images/icon_xinyuan.png" alt="">
							<view class="item-text">&nbsp;我的心愿</view>
						</view>
						<view>
							<img class="right" src="@/assets/images/cheveron-right.png" alt="">
						</view>
					</view>
					<view class="card-item" @click="toPath('/partner/partner')">
						<view class="item-wrapper">
							<img class="item-img" src="@/assets/images/icon_huoban.png" alt="">
							<view class="item-text">&nbsp;我的伙伴</view>
						</view>
						<view>
							<img class="right" src="@/assets/images/cheveron-right.png" alt="">
						</view>
					</view>
					<view class="card-item" @click="toPath('/cash/wallet')">
						<view class="item-wrapper">
							<img class="item-img" src="@/assets/images/icon_tixian.png" alt="">
							<view class="item-text">&nbsp;我的钱包</view>
						</view>
						<view>
							<img class="right" src="@/assets/images/cheveron-right.png" alt="">
						</view>
					</view>

					<view class="card-item">
						<view class="item-wrapper">
							<img class="item-img" src="@/assets/images/icon_yinsi.png" alt="">
							<view class="item-text">&nbsp;隐私协议</view>
						</view>
						<view>
							<img class="right" src="@/assets/images/cheveron-right.png" alt="">
						</view>
					</view><strong></strong>

					<view class="card-item" @click="toPath('/us/us')">
						<view class="item-wrapper">
							<img class="item-img" src="@/assets/images/icon_women.png" alt="">
							<view class="item-text">&nbsp;关于我们</view>
						</view>
						<view>
							<img class="right" src="@/assets/images/cheveron-right.png" alt="">
						</view>
					</view>
				</view>
			</view>
			<view class="push" @click="toPush">
				<img style="width: 150rpx;height: 150rpx;" src="@/assets/images/push-btn.png" alt="">
			</view>
		</view>

	</InterceptContainer>

</template>
<script lang="ts" setup>
	import Api from '@/apis/api';
	import InterceptContainer from '@/components/InterceptContainer/InterceptContainer.vue';
	import { onPullDownRefresh } from '@dcloudio/uni-app';
	import { onMounted, reactive, ref, onUnmounted } from 'vue';
	import { useUserStore } from '@/store/user';
	import { showLoading, showToast } from '@/utils/prompt';

	const userStore = useUserStore();
	const userInfo = reactive({
		myWishCount: 0,
		userInfo: {},
		participateCount: 0
	})
	function toBase() {
		console.log("userInfo.userInfo.authentication", userInfo.userInfo.authentication)
		if (!userInfo.userInfo.authentication || userInfo.userInfo.authentication === 0) {
			return showToast("您还未完成认证，请先完成个人认证！")
		}
		uni.navigateTo({
			url: '/pages/user/cash/base'
		})
	}
	onMounted(() => {
		getUseInfo()
	})

	onPullDownRefresh(() => {
		getUseInfo().finally(() => {
			uni.stopPullDownRefresh()
		})
	})

	function getUseInfo() {
		return Api.getUserInfo().then(({ data }) => {
			userInfo.myWishCount = data.myWishCount
			userInfo.participateCount = data.participateCount
			userInfo.userInfo = data.userInfo
		})
	}

	function toEdit(url : string) {
		uni.navigateTo({
			url: '/pages/user' + url
		})
	}
	function toPush() {
		uni.reLaunch({
			url: '/pages/push/push'
		})
	}

	function toPath(url : string) {
		uni.navigateTo({
			url: '/pages/user' + url
		})
	}
</script>

<style lang="scss" scoped>
	page {
		background: url('@/assets/images/home_bg.png') no-repeat #f8f8f8;
		background-size: cover;
		height: 94vh;
	}

	.user-warpper {
		.header {
			height: 330rpx;
			padding-top: 20rpx;
			padding-left: 53rpx;
			padding-right: 40rpx;

			.setting-icon {
				display: flex;
				justify-content: flex-end;

				img {
					width: 46rpx;
					height: 46rpx;
				}
			}

			.user {
				display: flex;
				align-items: center;

				.ava {
					width: 116rpx;
					height: 116rpx;
				}

				.name {
					margin-left: 20rpx;
					width: 116rpx;
					height: 116rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					font-family: PingFangSC-Medium;
					font-size: 41rpx;
					font-weight: normal;
					line-height: 116rpx;
					letter-spacing: 0px;
					color: #333333;

				}
			}

			.num-tips {
				display: flex;
				text-align: center;
				justify-content: space-between;
				margin-top: 44rpx;

				.item {
					width: 112rpx;
					flex-basis: 85px;

					.num {
						color: #333333;
						font-family: PingFang SC Bold;
						font-size: 40rpx;
					}

					.text {
						font-size: 28rpx;
						color: #666666;
					}
				}
			}
		}

		.body {
			padding: 0 30rpx;

			.card {
				border-radius: 20rpx;
				background: #FFFFFF;
				height: 260rpx;
				padding: 0 32rpx;
				padding-top: 28rpx;
				padding-bottom: 20rpx;

				.card-title {
					color: #333333;
					font-size: 30rpx;
					font-family: PingFang SC Bold;
				}

			}

			.card-list {
				border-radius: 20rpx;
				background: #fff;
				padding-left: 30rpx;
				padding-right: 14rpx;
				margin-top: 20rpx;

				.card-item {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-wrapper {
						display: flex;
						height: 116rpx;
						align-items: center;
					}

					border-bottom: 1px solid #eee;

					.item-img {
						width: 56rpx;
						height: 56rpx;
					}

					.right {
						width: 40rpx;
						height: 40rpx;
					}

					.item-text {
						color: #333333;
						font-size: 28rpx;
					}

					&:last-child {
						border-bottom: 0;
					}
				}
			}

			.server {
				display: flex;
				margin-top: 14rpx;
				justify-content: space-between;
				text-align: center;

				.server-img {
					width: 150rpx;
					height: 130rpx;

				}

				.server-text {
					color: #333333;
					font-size: 26rpx;

				}
			}
		}

		.push {
			position: fixed;
			right: 30rpx;
			top: 70%;
		}
	}
</style>